<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>员工管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
<div th:replace="~{common/admin-navbar :: navbar}"></div>

<div class="container mt-4">
    <h2 class="mb-4"><i class="bi bi-person-badge"></i> 员工管理</h2>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <span>当前注册员工（共 <span th:text="${#lists.size(users)}">0</span> 人）</span>
            <a href="/admin/users/new" class="btn btn-success btn-sm">
                <i class="bi bi-person-plus"></i> 创建用户
            </a>
        </div>

        <table class="table table-hover">
            <thead class="table-light">
            <tr>
                <th>userID</th>
                <th>姓名</th>
                <th>注册邮箱</th>
                <th>角色</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="user : ${users}" th:if="${not #lists.isEmpty(users)}">
                <td th:text="${user.userID}">CU001</td>
                <td th:text="${user.userName}">张三</td>
                <td th:text="${user.email ?: '未填写'}">zhangsan@example.com</td>
                <td>
                    <span th:text="${user.role == 'super_admin' ? '超级管理员' :
                                  (user.role == 'admin' ? '管理员' :
                                  (user.role == 'customer_service' ? '客服' : '客户'))}">
                        角色
                    </span>
                    <span th:if="${user.role == 'super_admin'}" class="badge bg-danger ms-2">最高权限</span>
                </td>
                <td th:if="${user.userID != session.loggedInUser &&
                           (user.role != 'super_admin' ||
                           (user.role == 'super_admin' && currentUser.role == 'super_admin'))}">
                    <select class="form-select form-select-sm role-select"
                            data-userid="${user.userID}"
                            style="width:120px;display:inline-block;margin-right:5px;">
                        <option value="customer" th:selected="${user.role} == 'customer'">客户</option>
                        <option value="customer_service" th:selected="${user.role} == 'customer_service'">客服</option>
                        <option value="admin" th:selected="${user.role} == 'admin'">管理员</option>
                    </select>
                    <button class="btn btn-primary btn-sm btn-update-role"
                            data-userid="${user.userID}"
                            onclick="handleUpdateRole(this)">
                        <i class="bi bi-arrow-repeat"></i> 更新
                    </button>
                    <button class="btn btn-danger btn-sm btn-delete"
                            data-userid="${user.userID}"
                            onclick="handleDelete(this)">
                        <i class="bi bi-person-dash"></i> 删除
                    </button>
                </td>
                <td th:if="${user.userID == loggedInUserId}">
                    <span class="text-muted">(当前用户)</span>
                </td>
            </tr>
            <tr th:if="${#lists.isEmpty(users)}">
                <td colspan="4" class="text-center text-muted">暂无注册员工</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- 添加JavaScript处理 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function handleDelete(button) {
        const userId = button.dataset.userid;
        if (confirm(`确定要删除员工 ${userId} 吗？`)) {
            window.location.href = `/admin/users/delete/${userId}`;
        }
    }

    function handleUpdateRole(button) {
        const userId = button.dataset.userid;
        const select = button.closest('td').querySelector('.role-select');
        const newRole = select.value;

        if(confirm(`确定要将用户 ${userId} 的角色修改为 ${newRole} 吗？`)) {
            fetch('/admin/users/update-role', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `userID=${userId}&newRole=${newRole}`
            }).then(response => {
                if(response.ok) {
                    alert('角色更新成功');
                    window.location.reload();
                } else {
                    alert('角色更新失败');
                }
            });
        }
    }
</script>
</body>
</html>